<script setup>
import {
    getCategoryListApi,
    querySetmealListApi,
    queryDishListApi,
    addShoppingApi
} from '@/api/user/browse.js'
import { ref } from 'vue'
import { ElMessage } from 'element-plus'

const activeName = ref()
const categoryList = ref();
const getCategoryList = async () => {
    let result = await getCategoryListApi();
    if (result.code === 1) {
        categoryList.value = result.data;
        activeName.value = categoryList.value[0].id + ',' + categoryList.value[0].type
        queryList(categoryList.value[0].id, categoryList.value[0].type)
        return;
    } else {
        return;
    }
}
getCategoryList();
const tabClick = async (tab) => {
    let list = tab.props.name.split(',');
    queryList(list[0], list[1]);
}
const cardLists = ref()
const queryList = async (Id, lx) => {
    const params = {
        categoryId: Id,
        status: 1
    }
    let result;
    if (lx == 1) {
        result = await queryDishListApi(params)
    } else if (lx == 2) {
        result = await querySetmealListApi(params)
    } else {
        ElMessage.error('参数异常')
        return;
    }
    if (result.code === 1) {
        cardLists.value = result.data;
        return;
    } else {
        return;
    }
}
const getImage = (image) => {
    return `/api/common/download?name=${image}`
}
const title = ref()
const cardListbf = ref()
// 上传的数据
const dialogFrom = ref({
    amount: null,
    image: '',
    name: '',
    setmealId: '',
    dishId: '',
    dishFlavor: [],
    number: 1
})
function qc() {
    title.value = '';
    dialogFrom.value.amount = null;
    dialogFrom.value.dishFlavor = [];
    dialogFrom.value.dishId = '';
    dialogFrom.value.image = '';
    dialogFrom.value.name = '';
    dialogFrom.value.number = 1;
    dialogFrom.value.setmealId = '';
}
const dialogFormVisible = ref(false)
const cardclick = (cardList) => {
    dialogFormVisible.value = true;
    title.value = '添加' + cardList.name + '进购物车?';
    cardListbf.value = cardList;
    if (cardListbf.value.flavors != null) {
        dialogFrom.value.dishId = cardListbf.value.id;
        delete dialogFrom.value.setmealId;
        cardListbf.value.flavors.forEach((item) => {
            if (typeof (item.value) == 'string') {
                item.value = item.value.split(',');
            }
        });
    } else {
        dialogFrom.value.setmealId = cardListbf.value.id;
        delete dialogFrom.value.dishId;
    }
}
function dialogFormCancelClick() {
    dialogFormVisible.value = false;
    qc()
}
function dialogFormConfirmClick() {
    dialogFormVisible.value = false;
    dialogFrom.value.amount = cardListbf.value.price;
    dialogFrom.value.image = cardListbf.value.image;
    dialogFrom.value.name = cardListbf.value.name;
    if (Array.isArray(dialogFrom.value.dishFlavor) && !dialogFrom.value.dishFlavor.length) {
        delete dialogFrom.value.dishFlavor;
    }else{
        dialogFrom.value.dishFlavor = dialogFrom.value.dishFlavor.join(',')
    }
    addShopping()
}
const addShopping = async () => {
    let result = await addShoppingApi(dialogFrom.value);
    qc();
    if (result.code === 1) {
        ElMessage.success(result.data);
        return;
    } else {
        return;
    }
}
</script>

<template>
    <el-tabs v-model="activeName" type="border-card" @tab-click="tabClick">
        <el-tab-pane v-for="category in categoryList" :label="category.name" :name="category.id + ',' + category.type">
            <el-card v-for="cardList in cardLists" style="margin-bottom: 10px;" @click="cardclick(cardList)">
                <el-row :gutter="2">
                    <el-col :span="8">
                        <div class="card-item-image">
                            <el-image style="width: 80px; height: 80px" :src="getImage(cardList.image)" :fit="fit" />
                        </div>
                    </el-col>
                    <el-col :span="16">
                        <div class="card-item-text">
                            <el-text tag="b" type="primary" style="font-size: 20px;" line-clamp="1">{{ cardList.name
                            }}</el-text>
                            <br />
                            <el-text type="info" line-clamp="2">{{ cardList.description }}</el-text>
                            <br />
                            <el-text type="warning" style="font-size: 18px;">￥:{{ (cardList.price) / 100 }}</el-text>
                        </div>
                    </el-col>
                </el-row>
            </el-card>
        </el-tab-pane>
    </el-tabs>
    <el-dialog v-model="dialogFormVisible" align-center width="90%" :show-close="false" :close-on-click-modal="false"
        :close-on-press-escape="false" :title="title" :size="large">
        <el-form :model="dialogFrom" label-position="left " label-width="100px" ref="dialogFromRef"
            :rules="dialogFromRules">
            <el-text type="info">简介:{{ cardListbf.description }}</el-text><br /><br />
            <template v-if="cardListbf.flavors && cardListbf.flavors.length > 0">
                <el-form-item label="口味:" prop="flavors" label-width="25%">
                    <el-select v-model="dialogFrom.dishFlavor" placeholder="Select" multiple>
                        <el-option-group v-for="group in cardListbf.flavors" :label="group.name">
                            <el-option v-for="item in group.value" :key="item" :label="item" :value="item" />
                        </el-option-group>
                    </el-select>
                </el-form-item>
            </template>
            <el-form-item label="数量:" label-width="25%">
                <el-input-number v-model="dialogFrom.number" :min="1" :max="100" />
            </el-form-item>
        </el-form>
        <template #footer>
            <span>
                <el-button @click="dialogFormCancelClick()">取消</el-button>
                <el-button @click="dialogFormConfirmClick()">确认</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<style lang="scss" scoped></style>